import { Outlet } from 'react-router-dom'
import { Layout, theme, Divider, Affix, Button } from 'antd';
import React from 'react';
import Sidebar from './components/sidebar'
import Topbar from './components/topbar'
import SysButton from './components/sysbutton'
import { useEnvStore } from '@/stores/env';
const { Header, Footer, Sider, Content } = Layout;
import { useShallow } from 'zustand/react/shallow';
const Main = function () {
  const {isExpandedSidebar, isMobile} = useEnvStore(useShallow((state) => ({
    isExpandedSidebar: state.isExpandedSidebar,
    isMobile: state.isMobile
  })))
  const {
    token: { colorBgContainer, borderRadiusLG, colorSplit },
  } = theme.useToken();



  return (
    <Layout className=' overflow-hidden h-screen w-full max-w-full h-screen'>
      <Sider
        collapsedWidth={isMobile ? 0 : undefined}
        // breakpoint="lg"
        // collapsedWidth="0"
        style={{ background: colorBgContainer }}
        trigger={null} collapsible collapsed={!isExpandedSidebar}>
        <div className='flex items-center justify-center h-14'
          style={{ borderInlineEnd: '1px solid ' + colorSplit }}>
          <img src="/vite.svg" alt="" />
        </div>
        <Divider className='my-2' />
        <Sidebar />
      </Sider>
      <Layout>
        <Header className='h-16'
          style={{ padding: 0, background: colorBgContainer }}>
          <Topbar />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}>
          <Outlet />
        </Content>
      </Layout>
      <SysButton/>
    </Layout>
  )
}
export default Main